<template>
  <demo-content :title="title">
    <p>
      在绘制线段时，你可以控制线段端点，也就是“线帽”(line
      cap)的样子，控制线段端点绘制的属性也称为 lineCap。
    </p>
    <p>
      线段端点样式的默认值是 butt，也就是将端点原模原样地绘制出来。round 和
      square 样式都会给线段的端点画上一顶帽子。
    </p>
    <div>
      lineCap 的可选值:
      <ul>
        <li>butt(默认): 将端点原模原样地绘制出来</li>
        <li>round: 在端点处多画一个半圆，其半径等于线段宽度的一半</li>
        <li>
          square: 在端点处多画一个矩形，其长度与线宽相等，宽度等于线宽的一半
        </li>
      </ul>
    </div>
    <canvas ref="canvasRef" width="600" height="400"></canvas>
  </demo-content>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { text, line } from "./utils";

const title = "线段端点与连接点";
// 指定组件上的属性
defineOptions({ title });

const canvasRef = ref<HTMLCanvasElement>();
onMounted(() => {
  const canvas = canvasRef.value!;
  const ctx = canvas.getContext("2d")!;
  const lineCapMsg = { fillStyle: "blue", fontSize: 18 };
  const lineX = { x1: 100, x2: 500, lineWidth: 20 };
  text.draw(ctx, { text: "线帽(linecap)", x: 20, y: 30, fontSize: 18 });
  text.draw(ctx, { text: "default", x: 20, y: 58, ...lineCapMsg });
  line.draw(ctx, { y1: 50, y2: 50, ...lineX });

  text.draw(ctx, { text: "butt", x: 20, y: 88, ...lineCapMsg });
  line.draw(ctx, { ...lineX, y1: 80, y2: 80, lineCap: "butt" });

  text.draw(ctx, { text: "round", x: 20, y: 118, ...lineCapMsg });
  line.draw(ctx, { ...lineX, y1: 110, y2: 110, lineCap: "round" });

  text.draw(ctx, { text: "square", x: 20, y: 148, ...lineCapMsg });
  line.draw(ctx, { ...lineX, y1: 140, y2: 140, lineCap: "square" });
});
</script>

<style src="./default.css" scoped></style>
